<template>
<q-dialog
  v-model="show"
  persistent
  :maximized="true"
  transition-show="slide-up"
  transition-hide="slide-down"
  class="code-merge">
  <div class="bg-white code-merge-dialog">
    <div class="code-edit-header text-center bg-primary text-white">
      文件对比
      <q-btn dense flat icon="iconfont icontubiao-89" v-close-popup class="fr right-btn">
        <q-tooltip>关闭</q-tooltip>
      </q-btn>
    </div>
    <div class="title q-px-md">
      <span class="left">{{oldTitle}}</span>
      <span class="right fr">{{newTitle}}</span>
    </div>
    <div class="code-merge" id="code-merge"></div>
  </div>
</q-dialog>

</template>

<script>
import _CodeMirror from 'codemirror'
import 'codemirror/lib/codemirror.css'
// 引入主题后还需要在 options 中指定主题才会生效
import 'codemirror/theme/mdn-like.css'
import 'codemirror/addon/merge/merge.css'
import 'codemirror/addon/merge/merge.js'
// 需要引入具体的语法高亮库才会有对应的语法高亮效果
// codemirror 官方其实支持通过 /addon/mode/loadmode.js 和 /mode/meta.js 来实现动态加载对应语法高亮库
// 但 vue 貌似没有无法在实例初始化后再动态加载对应 JS ，所以此处才把对应的 JS 提前引入
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/mode/css/css.js'
import 'codemirror/mode/xml/xml.js'
import 'codemirror/mode/clike/clike.js'
import 'codemirror/mode/markdown/markdown.js'
import 'codemirror/mode/python/python.js'
import 'codemirror/mode/r/r.js'
import 'codemirror/mode/shell/shell.js'
import 'codemirror/mode/sql/sql.js'
import 'codemirror/mode/swift/swift.js'
import 'codemirror/mode/vue/vue.js'

import DiffMatchPatch from 'diff-match-patch'
// eslint-disable-next-line
window.diff_match_patch = DiffMatchPatch
window.DIFF_DELETE = -1
window.DIFF_INSERT = 1
window.DIFF_EQUAL = 0
export default {
  name: 'code-merge',
  data () {
    return {
      show: false, // 弹框的显示与隐藏
      oldTitle: '',
      newTitle: ''
    }
  },
  methods: {
    showDialog (oldVal, newVal) {
      this.show = true
      this.$nextTick(() => {
        this.oldTitle = oldVal.title
        this.newTitle = newVal.title
        this.initUI(oldVal.content, newVal.content)
      })
    },
    hideDialog () {
      this.show = false
    },
    // 初始化插件
    initUI (oldVal, newVal) {
      this.$nextTick(() => {
        let target = document.getElementById('code-merge')
        _CodeMirror.MergeView(target, {
          value: oldVal,
          origLeft: null,
          orig: newVal,
          mode: 'cncMode',
          lineNumbers: true,
          styleActiveLine: true,
          matchBrackets: true,
          highlightDifferences: true,
          connect: null,
          collapseIdentical: false,
          revertButtons: false // 事件比较替换
        })
      })
    }
  }
}
</script>

<style scoped lang="stylus">
.code-merge{
  height calc(100% - 68px);

}
</style>
<style lang="stylus">
.fullscreen{
  z-index 6000 !important
}
.title{
  line-height: 28px;
}
.CodeMirror-merge, .CodeMirror-merge .CodeMirror{
  height: calc(100% - 10px)
}
.CodeMirror-merge-2pane .CodeMirror-merge-pane{
  height: 100%
}
.CodeMirror-merge-scrolllock-wrap{
  display: none;
}
.code-merge-dialog{
  .CodeMirror-merge-r-inserted, .CodeMirror-merge-l-inserted{
    background-color rgba(24,215,127,0.5)
    background-image none
  }
  .CodeMirror-merge-r-deleted, .CodeMirror-merge-l-deleted{
    background-color rgba(228,52,52, 0.5)
    background-image none
  }
}
</style>
